<template>
  <div class="integral-detail">
    <x-header>商品详情</x-header>
    <swiper :list="baseList" v-model="imgIndex"></swiper>
    <group style="margin-top:15px;">
      <cell>
        <span slot="title">
          <div class="goods-title">{{detail.name}}</div>
          <div class="goods-price">{{detail.point}} 积分</div>
        </span>
      </cell>
      <cell :value="`${detail.range}`">
        <i slot="icon" class="icon-riqi"></i>
      </cell>
    </group>
    <div class="con">
      <p class="con-title">商品详情</p>
      <pre class="con-font">{{detail.desc}}</pre>
    </div>
    <x-button class="btn" type="primary" @click.native="showBox=true">马上兑换</x-button>
    <confirm v-model="showBox" title="提示" @on-confirm="confirm">
      <p style="text-align:center;">确定需要使用{{detail.point}}积分兑换？</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  XHeader,
  Swiper,
  Group,
  Cell,
  Confirm,
  XButton
} from 'vux';
const IntegralStore = namespace('mine');

@Component({
  components: {
    XHeader,
    Swiper,
    Group,
    Cell,
    Confirm,
    XButton
  }
})
export default class IntegralDetail extends Vue {
  @IntegralStore.Action getBuyIntergral
  @IntegralStore.State buyIntergral
  imgIndex = 0
  showBox = false
  baseList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: '送你一辆车'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg', // 404
    title: '送你一次旅行',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }]
  created () {
    // this.init()
    this.detail = this.$route.params.data
    this.baseList = [
      { url: 'javascript', img: this.detail.url, title: '' }
    ]
  }
  confirm () {
    const params = {
      goodId: this.detail._id
    }
    this.getBuyIntergral(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$router.replace({name: 'integralres', params: {data: this.buyIntergral}})
      }
    })
  }
}
</script>
<style lang="less">
  .integral-detail {
    padding-top: 51px;
    padding-bottom: 51px;
    .con {
      margin-top: 15px;
      background: #ffffff;
      padding: 10px;
      .con-title {
        line-height: 44px;
        font-size: 14px;
        color: #000000;
      }
      .con-sub-title {
        color: #333333;
        font-size: 14px;
        line-height: 24px;
        margin: 10px 0;
      }
      .con-font {
        // font-size: 12px;
        font-size: #666666;
      }
    }
    .btn {
      width: 95%;
      position: absolute;
      bottom: 0;
      left: 5%;
    }
    .weui-cell__ft {
      // font-size: 12px;
    }
    .goods-title {
      font-size: 14px;
    }
    .goods-price {
      // font-size: 12px;
      color: red;
    }
    .weui-grid {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .weui-grid__label {
        margin: 10px 0;
        width: 100%;
        span {
          font-size: 14px;
        }
      }
      .money {
        // font-size: 12px;
        color: red;
      }
    }
    .weui-grid__label {
      // font-size: 12px;
    }
    .weui-grid__icon {
      line-height: 30px;
      text-align: center;
      width: 100%;
      height: 60%;
    }
    .weui-cells {
      margin-top: 0;
    }
    .item-box {
      margin-top: 5px;
      background: #ffffff;
    }
  }
</style>


